<template>
	<view class="corrigendumFireFacilities ff-font-14 ff-color-000">
		<view class="corrigendumFireFacilities-header ff-bg-fff ff-padding-10">
			<view @click="allSelectClick()"
				class="corrigendumFireFacilities-header-box ff-border-radius-10 ff-padding-10 ff-align-items-one">
				<view class="corrigendumFireFacilities-header-box-select">
					<image v-show="!allChecked"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/no-select.png" mode="">
					</image>
					<image v-show="allChecked"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/select.png" mode="">
					</image>
				</view>
				<view class="ff-font-16 ff-font-weight-600 ff-margin-left-10">全选</view>
			</view>
		</view>
		<view class="corrigendumFireFacilities-content ff-padding-bottom-60">
			<view>
				<view v-if="facilitiesList.length > 0">
					<view class="ff-margin-12 ff-bg-fff ff-padding-15 ff-border-radius-10"
						v-for="(item, index) of facilitiesList" :key="index">
						<view class="ff-flex-between ff-align-items-one"
							:class="{ 'ff-border-bottom': item.iconCheck, 'ff-padding-bottom-20': item.iconCheck }">
							<view class="ff-align-items-one" @click.stop="selectClick(item)">
								<view class="corrigendumFireFacilities-content-select">
									<image v-show="item.isChecked == 2"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/no-more-select.png"
										mode=""></image>
									<image v-show="item.isChecked == 1"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/more-select.png"
										mode=""></image>
								</view>
								<view class="ff-font-15 ff-font-weight-600 ff-margin-left-10"
									:class="{ 'ff-color-blue': item.iconCheck }">{{ item.facilitiesTypeName }}</view>
							</view>
							<view @click.stop="iconCheckClick(index)" class="ff-padding-left-20">
								<view v-if="!item.iconCheck"><u-icon name="arrow-down" color="#0B204B"
										size="36"></u-icon>
								</view>
								<view v-else><u-icon name="arrow-up" color="#3178FF" size="36"></u-icon></view>
							</view>
						</view>
						<view v-if="item.iconCheck">
							<view
								class="ff-padding-15 ff-border-bottom ff-align-items-one ff-line-height-1-3 ff-flex-between"
								v-for="(itemSon, ind) of item.items" :key="ind">
								<view>{{ itemSon.facilitiesItemName }}</view>
								<input class="ff-text-right" placeholder="请输入" placeholder-style="color:#999"
									type="number" v-model.trim="itemSon.number" />
							</view>
						</view>
					</view>
				</view>
				<f-noData v-else></f-noData>
			</view>
		</view>
		<view class="corrigendumFireFacilities-submitBut ff-flex">
			<view class="corrigendumFireFacilities-submitBut-add animate__animated animate__bounceInLeft">
				<u-button @click="addFacilities" type="primary" plain>新增消防设施</u-button>
			</view>
			<view class="corrigendumFireFacilities-submitBut-save animate__animated animate__bounceInRight"><u-button
					@click="saveFacilities" type="primary">保存</u-button></view>
		</view>
		<!-- 组件类 -->
		<u-select v-model="facilitiesState" mode="single-column" :default-value.sync="defaultVal"
			:list="facilitiesTypeList" :safe-area-inset-bottom="true" label-name="facilitiesTypeName" value-name="id"
			title="消防设施" @confirm="facilitiesConfirm"></u-select>
		<!-- 弹窗区 -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
	</view>
</template>

<script>
	export default {
		name: 'corrigendumFireFacilities',
		data() {
			return {
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				paramsInfo: {}, // 前页面传过来的数据
				facilitiesState: false, // 新增消防设施类型的弹窗
				defaultVal: [0], // 消防设施设备单选框默认选中
				facilitiesTypeList: [], // 消防设施类型列表
				facilitiesSubitemList: [], // 消防设施设备子项列表
				idList: [], // id集合
				detailsUrl: '', // 获取建筑物详情的地址
				submitUrl: '', // 提交消防设施的地址
				facilitiesList: [], // 已有的消防设施列表
				allChecked: false, // 全选
				noData: false // 没有更多数据了
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			this.paramsInfo = JSON.parse(e.paramsInfo);
			if (this.paramsInfo.type == 1) {
				this.detailsUrl = '/serviceOrg/maintenance/building/facilities/page'; // 第一次勘误消防列表详情接口
				this.submitUrl =
					`/serviceOrg/maintenance/${this.paramsInfo.maintenanceBuildingId}/buildings/facilities/update`; // 第一次勘误消防列表提交接口
				this.getFacilitiesList(); // 获取已选择的消防设施列表数据
				this.getFacilitiesTypeList(); // 获取消防设施类型数据
				return;
			}
			if (this.paramsInfo.type == 2) {
				this.detailsUrl = `/serviceOrg/project/building/facilities/page2`;
				this.submitUrl =
					`/serviceOrg/project/${this.paramsInfo.maintenanceBuildingId}/buildings/facilities/update`;
				this.getFacilitiesList(); // 获取已选择的消防设施列表数据
				this.getFacilitiesTypeList(); // 获取消防设施类型数据
				return;
			}
		},
		methods: {
			//--------------------已有消防设施-----------------------
			// 获取已选择的消防设施列表数据
			async getFacilitiesList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				if (this.paramsInfo.type == 1) {
					var params = {
						current: 1,
						maintenanceBuildingId: this.paramsInfo.maintenanceBuildingId,
						size: 100
					};
				} else if (this.paramsInfo.type == 2) {
					var params = {
						current: 1,
						projectBuildingId: this.paramsInfo.maintenanceBuildingId,
						size: 100
					};
				}

				// let params = {
				// 	current: 1,
				// 	size: 30,
				// 	maintenanceBuildingId: this.paramsInfo.maintenanceBuildingId
				// };
				const data = await this.$http.post({
					url: this.detailsUrl,
					data: params
				});
				// console.log('获取已选择的消防设施列表数据-----', data);
				if (data.code == 200) {
					this.facilitiesList = data.data.records;
					this.facilitiesList.forEach(res => {
						this.idList.push(res.facilitiesTypeId);
						this.$set(res, 'iconCheck', false);
						this.$set(res, 'isNew', 2)
					});
					// some()方法 只要其中一个为true 就会返回true的，
					// 相反every()方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；
					let judgeCheck = this.facilitiesList.every(item => {
						return item.isChecked == 1;
					});
					if (judgeCheck) {
						this.allChecked = true;
					} else {
						this.allChecked = false;
					}
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击全选
			allSelectClick() {
				this.allChecked = !this.allChecked;
				if (this.allChecked) {
					this.facilitiesList.forEach(item => {
						item.isChecked = 1;
					});
				} else {
					this.facilitiesList.forEach(item => {
						item.isChecked = 2;
					});
				}
			},
			// 点击表头选择or取消
			selectClick(item) {
				if (item.isChecked == 2) {
					item.isChecked = 1;
				} else if (item.isChecked == 1) {
					item.isChecked = 2;
				}
				// some()方法 只要其中一个为true 就会返回true的，
				// 相反every()方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；
				let judgeCheck = this.facilitiesList.every(item => {
					return item.isChecked == 1;
				});
				if (judgeCheck) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			// 点击列表展开or折叠
			iconCheckClick(index) {
				this.facilitiesList[index].iconCheck = !this.facilitiesList[index].iconCheck;
			},

			// ---------------------------消防设施类型列表--------------------------------
			// 获取消防设施类型数据
			async getFacilitiesTypeList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/project/queryFacilitiesType'
				});
				// console.log('获取消防设施类型数据-----', data);
				if (data.code == 200) {
					this.facilitiesTypeList = data.data;
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击新增消防设施
			addFacilities() {
				this.facilitiesState = true;
			},
			// 点击确认选择的当前的消防设施
			facilitiesConfirm(e) {
				let selectVal = e[0];
				if (this.idList.includes(selectVal.value)) {
					// 包含
					this.$refs.uToast.show({
						title: '请勿重复添加',
						type: 'error'
					});
				} else {
					this.idList.push(selectVal.value);
					this.facilitiesTypeList.filter(item => {
						if (item.id === selectVal.value) {
							this.facilitiesSubitemList = item.items;
						}
					});
					let subitem = []; // 新建子项空数组
					this.facilitiesSubitemList.forEach(items => {
						subitem.push({
							facilitiesItemId: +items.id,
							facilitiesItemName: items.facilitiesItemName,
							number: ''
						});
					});
					// 添加到历史的消防设施设备中
					this.facilitiesList.push({
						iconCheck: true, // 是否展开列 false（展开） / true（关闭）
						isChecked: 1,
						isNew: 1,
						buildingId: this.facilitiesId,
						facilitiesTypeId: +selectVal.value,
						facilitiesTypeName: selectVal.label,
						items: subitem
					});
				}
				this.defaultVal = [this.facilitiesTypeList.findIndex(item => item.id === e[0].value)] || [
					0
				]; // 解决select默认值不重置问题
				this.$forceUpdate(); // 数据进行强制刷新渲染
			},
			// 保存--------------
			saveFacilities() {
				// some()方法 只要其中一个为true 就会返回true的，
				// 相反every()方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；
				// 判断至少选择了一项数据
				let judgeSelect = this.facilitiesList.some(item => {
					return item.isChecked == 1;
				});
				if (judgeSelect) {
					this.$refs.loading.openLoading('提交中···'); // 打开loading动画
					let paramsUpate = [];
					this.facilitiesList.forEach(res => {
						paramsUpate.push({
							facilitiesTypeId: res.facilitiesTypeId,
							facilitiesTypeName: res.facilitiesTypeName,
							isChecked: res.isChecked,
							isNew: res.isNew,
							items: res.items
						});
					});
					this.$http.post({
						url: this.submitUrl,
						data: paramsUpate
					}).then(res => {
						// console.log('消防设施---保存返回的结果', res);
						this.$refs.loading.closeLoading(); // 关闭loading动画
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '保存成功',
								type: 'success'
							});
							setTimeout(() => {
								// 刷新前一个页面 （配合前页面的onShow使用）
								uni.navigateBack({
									delta: 1,
									success: function() {
										let page = getCurrentPages().pop(); //跳转页面成功之后
										if (!page) return;
										page.onLoad(page.options); //如果页面存在，则重新刷新页面
									}
								});
							}, 500);
						} else {
							uni.showModal({
								title: '无法保存',
								content: res.msg,
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {}
								},
							})
						}
					});
				} else {
					this.$refs.uToast.show({
						title: '请至少选中一项消防设施',
						type: 'error'
					});
					return;
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.corrigendumFireFacilities {
		padding-bottom: 100rpx;

		&-header {
			&-box {
				background-color: #f7fbff;

				&-select {
					image {
						width: 45rpx;
						height: 45rpx;
					}
				}
			}
		}

		&-content {
			&-select {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			/deep/input {
				width: 180rpx;
			}
		}

		&-submitBut {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 33;
			width: 100%;
			background-color: #ffffff;

			&-add {
				width: 50%;

				/deep/.u-btn--primary--plain {
					background-color: #ffffff !important;
				}
			}

			&-save {
				width: 50%;
			}
		}
	}
</style>